<template>
    <div class="container">
        <a-card title="药材产地信息">
            <div class="tool-bar">
                <a-input-search allowClear style="width: 200px;color: #05b089" v-model="kw" placeholder="模板名称/编号"
                    @search="getTableData"></a-input-search>
                <div>
                    <a-button type="primary" @click="add" v-if="$utilCheckPermission(['medicinalPlaceOfOriginAdd'])">新增模板</a-button>
                    <a-button type="primary" @click="exportData" :loading="downloadLoading">导出数据</a-button>
                </div>
            </div>
            <div class="table">
                <a-table bordered :loading="tableOption.loading" :rowKey="(item,i)=>i" :columns="tableOption.columns"
                    :data-source="tableOption.dataSource" :pagination="tableOption.pagination">
                    <template slot='action' slot-scope="text, record">
                        <div>
                            <a-button style="margin-right: 10px" type="primary" @click="edit(record)"
                                v-if="$utilCheckPermission(['medicinalPlaceOfOriginCompile'])">编辑</a-button>
                            <a-button style="margin-right: 10px" type="primary" @click="detail(record)"
                                v-if="$utilCheckPermission(['medicinalPlaceOfOriginDetails'])">详情</a-button>
                            <a-button style="margin-right: 10px" type="primary"
                                @click="changeState(record.templateId,record.state)"
                                v-if="$utilCheckPermission(['medicinalPlaceOfOriginForbidden'])">{{record.state?'启用':'禁用'}}</a-button>
                            <a-popconfirm okText="确定" cancelText="取消" title="确定删除吗？" @confirm="remove(record)"
                                v-if="$utilCheckPermission(['medicinalPlaceOfOriginRemove'])">
                                <a-button type="primary">删除</a-button>
                            </a-popconfirm>
                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <medHerbAddOrEdit :disabledForm="viewDetail" :editId="editId" :visible="modalVisible" @closeModal="onClose"></medHerbAddOrEdit>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import nextApi from "@/api/nextApi";
import {downLoadFile} from "@/utils";
@Component({
    name: "medHerbInfo",
    components: {
        medHerbAddOrEdit: () => import("./components/medHerbInfoAddOrEdit.vue"),
    },
})
export default class extends Vue {
    modalVisible = false;
    kw = "";
    tableOption = {
        loading: false,
        dataSource: [],
        columns: [
            {
                title: "序号",
                dataIndex: "index",
                key: "index",
                align: "center",
                customRender: (text: string, record: any, index: number) => `${index + 1}`,
            },
            {
                title: "模板名称",
                dataIndex: "templateName",
                key: "templateName",
                align: "center",
            },
            {
                title: "编号",
                dataIndex: "materialRelevanceId",
                key: "materialRelevanceId",
                align: "center",
            },
            {
                title: "品名",
                dataIndex: "varietyName",
                key: "varietyName",
                align: "center",
            },
            {
                title: "产地",
                dataIndex: "placeOfOrigin",
                key: "placeOfOrigin",
                align: "center",
            },
            {
                title: "添加时间",
                dataIndex: "createTime",
                key: "createTime",
                align: "center",
            },
            {
                title: "最后更新时间",
                dataIndex: "updateTime",
                key: "updateTime",
                align: "center",
            },
            {
                title: "备注",
                dataIndex: "remark",
                key: "remark",
                align: "center",
            },
            {
                title: "状态",
                dataIndex: "state",
                key: "state",
                align: "center",
                customRender: (text: string) => {
                    return text == "0" ? "启用" : "禁用";
                },
            },
            {
                align: "center",
                dataIndex: "action",
                key: "action",
                title: "操作",
                scopedSlots: { customRender: "action" },
            },
        ],
        pagination: {
            pageSize: 10,
            current: 1,
            total: 0,
            showTotal: (total: number | string) => `共${total}条`,
            onChange: this.pageChange,
        },
    };
    editId = "";
    viewDetail = false;
    mounted() {
        this.getTableData();
    }
    async getTableData() {
        this.tableOption.loading = true;
        let params = {
            pageNum: this.tableOption.pagination.current,
            pageSize: this.tableOption.pagination.pageSize,
            name: this.kw,
        };
        const res = await nextApi.getMedHerbList(params);
        if(res.data){
            this.tableOption.dataSource = res.data.rows;
            this.tableOption.pagination.total = res.data.total;
        }else{
            this.tableOption.dataSource = [];
        }
        this.tableOption.loading = false;
    }
    //导出数据
    downloadLoading = false;
    exportData() {
        nextApi.exportRecords((res: any)=>{
            this.downloadLoading = true;
            const blob = new Blob([res.data], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                // type: "application/vnd.ms-excel",
            });
            downLoadFile(blob, "产地信息列表");
            this.downloadLoading = false;
        })
    }
    //新增
    add() {
        this.modalVisible = true;
        this.editId = "";
    }
    //编辑
    edit(record: any) {
        this.editId = record.templateId;
        this.modalVisible = true;
    }
    //详情
    detail(record: any) {
        this.editId = record.templateId;
        this.viewDetail = true;
        console.log(this.viewDetail);
        this.modalVisible = true;
    }
    //删除
    async remove(record: any) {
        const res = await nextApi.removeData(record.templateId);
        if (res.code == 200) {
            this.$message.success(res.msg);
            await this.getTableData();
        }
    }
    //启用/禁用
    async changeState(id: number, state: number) {
        let params = {
            id,
            templateState: state ? 0 : 1,
        };
        const res = await nextApi.changeMedHerbState(params);
        if (res.code == 200) {
            this.$message.success(res.msg);
        }
        await this.getTableData();
    }
    pageChange(page: number, pageSize: number) {
        this.tableOption.pagination.pageSize = pageSize;
        this.tableOption.pagination.current = page;
        this.getTableData();
    }
    onClose() {
        this.modalVisible = false;
        this.viewDetail = false;
        this.getTableData();
    }
}
</script>
<style scoped lang="scss">
.container {
    padding: 20px;
    .tool-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
            padding-left: 10px;
            font-size: 18px;
        }
        button {
            margin-left: 10px;
        }
    }
    .table {
        margin-top: 20px;
    }
}
</style>
